import { Button, Modal, Typography } from 'antd';
import type { FC } from 'react';
import styles from './index.less';

type TProps = {
  visible: boolean;
  onCancel: TAnyFunction;
  data: TIdNameData[];
};

const ListLayer: FC<TProps> = (props) => {
  const { visible, onCancel, data = [] } = props;

  // <div className={styles.formHeader}>
  //     <Typography.Text strong>{title}</Typography.Text>
  //     <Typography.Text className="fs-12" type="secondary" style={{ marginLeft: 10 }}>
  //       {subTitle}
  //     </Typography.Text>
  //   </div>

  const renderDiv = () => {
    console.warn('data', data);
    if (Array.isArray(data) && data?.length > 0) {
      const element = data.map((val, index) => (
        <div style={{ marginBottom: 10 }} key={index}>
          <div className={styles.formHeader}>
            <Typography.Text strong>{val.name}</Typography.Text>
          </div>
          <div style={{ border: '1px solid #ccc', padding: 10 }}>
            {val?.goodsNames?.length > 0 ? val?.goodsNames.join('、') : '暂无'}
          </div>
        </div>
      ));
      return element;
    }
    return null;
  };

  return (
    <Modal
      title="商品清单"
      open={visible}
      width={600}
      onCancel={onCancel}
      destroyOnClose
      footer={[
        <Button key="close" type="primary" onClick={onCancel}>
          关闭
        </Button>,
      ]}
    >
      <div>{renderDiv()}</div>
    </Modal>
  );
};

export default ListLayer;
